<template>
  <div class="meitituiguang">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>媒体推广商品管理</el-breadcrumb-item>
          </el-breadcrumb> -->

          <div style="background: rgb(218, 231, 245);padding: 15px 20px; font-size: 14px;margin:20px 0;border-radius:10px;display:flex;width:99%;">
             <img src="../../static/img/bluelogo.png" class="jinggao_image" alt="">
            <div>商品销售页是单商品的下单链接，用户直接进入商品展示页，支持多SKU选择，可用于代客下单及信息流推广等</div>
          </div>
            <div class="search_container">
              <div style="margin-left:20px;">
                <div style="margin:12px 0 8px 28px;font-size:14px">页面名称</div>
                <el-input placeholder="请输入页面名称" style="margin-left:20px;width:240px;" v-model="all.sale_name"></el-input>
              </div>
              <div>
                <div style="margin:12px 0 8px 28px;font-size:14px">发布人</div>
                <el-input placeholder="请输入发布人" style="margin-left:20px;width:240px;" v-model="all.user_name"></el-input>
              </div>
              <div>
                <div style="margin:12px 0 8px 28px;font-size:14px">来源</div>
                <el-input placeholder="请输入来源" style="margin-left:20px;width:240px;" v-model="all.page_source"></el-input>
              </div>
              <div>
                <div style="margin:12px 0 8px 28px;font-size:14px">ID</div>
                <el-input placeholder="请输入ID" style="margin-left:20px;width:240px;" v-model="all.id"></el-input>
              </div>
              <div>
                <el-button icon="el-icon-search" class="btn_search" round @click="searchClick">检索</el-button>
              </div>
           </div>
           <div class="title_box">
             <div class="title_box_son">商品页(单商品)</div>
            <div class="flex" style="margin-right: 20px;">
            <el-button style="height:40px;border-radius: 14px;" size="medium" @click="tianjia2()">创建多SKU商品页</el-button>
            <el-button type="danger" round size="medium" @click="tianjia()" style="height:40px;border-radius: 14px;background:#F72C50">创建单SKU商品页</el-button>
            <!-- <el-button type="danger" size="medium">创建可选号商品页</el-button> -->
          </div>
           </div>
          <div class="zhiboxitong_table">
            <el-table :data="list" border style="width: 100%" align="left" :header-cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD' }"
            :cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD'}" >
              <el-table-column prop='id' label="ID" align="left"></el-table-column>
              <el-table-column prop='sale_name' label="页面名称" align="left"></el-table-column>
              <el-table-column prop='user_name' label="发布人" align="left"></el-table-column>
              <el-table-column prop='created_at' label="创建时间" align="left" width="200px"></el-table-column>
              <el-table-column prop='page_source' label="来源" align="left"></el-table-column>
              <el-table-column prop='pv' label="PV" align="left"></el-table-column>
              <el-table-column prop='uv' label="UV" align="left"> </el-table-column>
              <el-table-column prop='saled' label="今日销售" align="left"> </el-table-column>
              <!-- <el-table-column prop='order' label="排序"> </el-table-column> -->
              <el-table-column label="销售页链接" width="200px" align="left">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="fuzhi(scope.row.id)" v-if="scope.row.page_id != 0" style="color:#005AFF;font-size:14px">复制链接</el-button>
                  <el-button size="mini" type="text" @click="fuzhi(scope.row.id,'duo')" v-if="scope.row.page_id == 0" style="color:#005AFF;font-size:14px">复制链接</el-button>
                  <el-button size="mini" type="text" @click="creatQrCode(scope.row.id)" v-if="scope.row.page_id != 0" style="color:#005AFF;font-size:14px">生成二维码</el-button>
                  <el-button size="mini" type="text" @click="creatQrCode(scope.row.id,'duo')" v-if="scope.row.page_id == 0" style="color:#005AFF;font-size:14px">生成二维码</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="280px" align="left">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="bianji(scope.row.id,'duo')" v-if="scope.row.page_id == 0" style="color:#005AFF;font-size:14px">编辑页面</el-button>
                  <el-button size="mini" type="text" @click="bianji(scope.row.id)" v-if="scope.row.page_id != 0" style="color:#005AFF;font-size:14px">编辑页面</el-button>
                  <el-button size="mini" type="text" @click="shanchu(scope.row.id)" style="color:#005AFF;font-size:14px">删除</el-button>

                  <el-button size="mini" type="text" @click="xiazaituiguang(scope.row.id)" style="color:#005AFF;font-size:14px">下载下单记录</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right; padding: 10px 0;background:rgba(246,247,252,0.9)">
               <el-pagination
                background
                layout="total,prev, pager, next"
                :page-size="all.page_size"
                @current-change="fanye"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" :close-on-click-modal="false" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog title="推广二维码" :visible.sync="erweima_log" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="qrcode" ref="qrCodeUrl"  style="margin: 0 auto;width:200px"></div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  export default {
    components: {
      top,left,QRCode
    },
    name: "meitituiguang",
    data() {
      return {
          list:[],
          tongbuall:"",
          log:false,
          erweima_log:false,

          all:{
            page:1,
            page_size:10,
            tab:0,
            sale_name:'',
            user_name:'',
            page_source:"",
            id:""
          },
          shopid:""
      }
    },
    created() {
      this.getlist()
      this.shopid = localStorage.getItem('sc_shopid')
    },
    mounted() {

    },
    methods: {
      searchClick:function(){
           this.getlist()
      },
      //       handleSizeChange(val) {
      //   this.all.page_size = val
      //   this.getlist()
      //   console.log(`每页 ${val} 条`);
      // },
      // handleCurrentChange(val) {
      //   this.all.page = val
      //   this.getlist()
      //   console.log(`当前页: ${val}`);
      // },
      xiazaituiguang:function(id){

        axios.post(`${this.apis}/api/store/export/order_records_by_product`,{id:id})
          .then(response => {
            if(response.data.msg.code == 0){
              location.href = location.origin + '/' + response.data.data.file
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      creatQrCode(id,val) {
        this.erweima_log = true
        this.$nextTick(()=>{
          this.$refs.qrCodeUrl.innerHTML = '';
          // let url = location.origin + '/h5/dingdanxinxiliu1218.html?id=' + id

          if(val == 'duo'){
            var url = location.origin + '/h5/duoshangpin.html?id=' + id
          }else{
            var url = location.origin + '/h5/order_page.html?id=' + id
          }

          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: url, // 需要转换为二维码的内容
              width: 400,
              height: 400,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
        })

      },
          fanye:function(val){
      this.all.page = val
      this.getlist()
    },
      fuzhi:function(id,val){
        if(val == 'duo'){
          var url = location.origin + '/h5/duoshangpin.html?id=' + id
        }else{
          var url = location.origin + '/h5/order_page.html?id=' + id + '&require_param=1'
        }
        this.copy(url)
      },
      shanchu:function(id){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`${this.apis}/api/page/delete`,{id:id})
            .then(response => {
              if(response.data.msg.code == 0){
                this.getlist()
                this.$message.success('已删除');
              }else{
                this.$message.error(response.data.msg.info);
              }
            });
        })
      },
      fanye:function(page){
        this.all.page = page
        this.getlist()
      },

      getlist:function(){
        axios.get(`${this.apis}/api/page/list`,{params:this.all})
          .then(response => {
            if(response.data.msg.code == 0){
              this.list = response.data.data.data
              this.total = response.data.data.total
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      tianjia2:function(){
        this.$router.push({
          path:"/zhiboxitong/meitituiguang/zhiboxiaoshou_shangpinfabuduo",
          query:{
            tab:this.$route.query.id
          }
        })
      },
      tianjia:function(){
        this.$router.push({
          path:"/zhiboxitong/meitituiguang/meitituiguang_fabu",
        })
      },
      bianji:function(id,val){
          if(val == 'duo'){
            var url = "/zhiboxitong/meitituiguang/zhiboxiaoshou_shangpinfabuduo"
          }else{
            var url = "/zhiboxitong/meitituiguang/meitituiguang_fabu"
          }
          this.$router.push({
            path:url,
            query:{
              id:id
            }
          })


      }

    }
  }
</script>

<style scoped lang="less">
/deep/ .el-table__header th{
&:first-child{
  //  border-top-left-radius: 50px;
 }
}
/deep/ .el-table{
  background-color: #F8F9FD;
}

// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover td {
  background-color: white !important;
}
/deep/ .el-table__body tr td:first-child {

  border-radius: 20px 0 0 20px;
   padding-left: 10px;
  box-sizing: border-box;

}
/deep/ .el-table__body tr td:last-child {
  border-radius: 0 20px 20px 0;
}
.jinggao_image{
  margin-right: 5px;
  width: 20px;
  height: 20px;
}
//去掉每行的下边框
  /deep/ .el-table td.el-table__cell,/deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: none;
  }

// 去掉表格单元格边框
.customer-table th{
    border:none;
  }
.customer-table td,.customer-table th.is-leaf {
  border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
/deep/ .el-table__body td{
 height: 72px;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{
  width: 0;
}
.customer-table::before{
  width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
// 表格有滚动时表格头边框
// .el-table--border th.gutter:last-of-type {
//     border: 1px solid #EBEEF5;
//     border-left: none;
// }
// 去除边框线
/deep/ .el-table::before {
    height: 0;
}
.title_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title_box_son{
    margin-left: 30px;
    font-size: 20px;
    font-weight: bold;
  }
}
  .meitituiguang {
  //  height: 100vh;
    // background: #f2f2f2;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100% !important;}
      .right{ width: calc(100vw - 220px);height: 100vh;overflow: auto;
            padding-left:20px;
        .zhiboxitong_right{
           height: calc(100vh - 90px);  background: #fff; border-radius: 5px;
          //  overflow: auto;
        }
        .zhiboxitong_table{ margin-top: 20px;padding: 20px 30px 0 30px;background: #F8F9FD;border-top-left-radius: 30px;}
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
  /deep/ .el-pagination{
  margin-right: 30px;
}
  /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
  font-size: 20px;
  font-weight: bold; /* 修改标题字体大小 */
}
/deep/ .el-input__inner {
  border-radius: 12px;

  box-shadow: none !important;
}
.search_container{
  width: 100%;
  display: flex;
  height: 120px;
  background: #F8F9FD;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 20px 0 0 20px;
}
.btn_search{
  background: #F72C50;
  border: 0;
  color: #fff;
  margin: 35px 0 0 30px;
}
/deep/ .el-pagination .el-pager li {
  border-radius: 12px; /* 设置圆角大小 */
  background: white;

}
</style>
